import './ContentList.scss';

import React from 'react';

import { connect } from 'react-redux';

import {
  changeLoadingStatus,
  getContentListData,
} from '@/page/index/redux/actions/contentListAction';

import ListItem from '@/page/index/comp/LIstItem/LIstItem.jsx';

import Loading from '@/component/Loading/Loading';

import ScrollView from '@/component/ScrollView/ScrollView';

class ContentList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isEnd: false,
    };
    this.page = 1;

    this.onScroll = this.onScroll.bind(this);
  }

  componentDidMount() {
    this.props.changeLoadingStatus(true);
    this.props.getContentListData();
  }

  onScroll() {
    if (!this.props.isLoading) {
      this.props.changeLoadingStatus(true);
      this.props.getContentListData();
      this.page++;
      if (this.page > 3) {
        this.setState({
          isEnd: true,
        });
      }
    }
  }

  renderItems() {
    const { list } = this.props;
    return list.map((item, index) => <ListItem key={index} itemData={item} />);
  }

  render() {
    return (
      <div className="list-content">
        <h4 className="list-title">
          <span className="title-line" />
          <span>附近商家</span>
          <span className="title-line" />
        </h4>
        <ScrollView isEnd={this.state.isEnd} scrollCallback={this.onScroll}>
          {this.renderItems()}
        </ScrollView>
        <Loading isend={this.state.isEnd} />
      </div>
    );
  }
}


const mapStateToProps = state => ({
  list: state.contentListReducer.list,
  isLoading: state.contentListReducer.isLoading,
});

const createActions = {
  getContentListData,
  changeLoadingStatus,
};

export default connect(mapStateToProps, createActions)(ContentList);
